<template>
  <div class="hotel-specs">
    <!-- 数据列表 -->
    <div class="content admin-common-bg">
      <div class="operate">
        <el-button
          type="primary"
          size="mini"
          icon="el-icon-plus"
          plain
          @click="dialogVisible = true"
          >新增</el-button
        >
        <el-button
          type="danger"
          size="mini"
          icon="el-icon-delete"
          plain
          v-show="multipleSelection.length !== 0"
          @click="batchDelete"
          >批量删除</el-button
        >
      </div>
      <div style="min-height: 294px">
        <el-table
          :data="dataList"
          :header-cell-style="{ background: '#f5f5f5' }"
          v-loading="tableLoading"
          @selection-change="handleSelectionChange"
          style="width: 100%"
        >
          <el-table-column type="selection" width="46" align="center">
          </el-table-column>
          <el-table-column
            prop="name"
            label="规格名"
            width="330"
            align="center"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column
            prop="price"
            label="价格"
            width="280"
            align="center"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column
            prop="stock"
            label="库存量"
            width="280"
            align="center"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button type="primary" size="mini" @click="edit(scope.row)"
                >修改</el-button
              >
              <el-button type="danger" size="mini" @click="del(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
          v-show="dataList.length > 0"
          background
          layout="prev, pager, next"
          :total="total"
          :current-page="currentPage"
          :page-size="pageSize"
          @current-change="handleCurrentChange"
          :page-count="7"
          style="text-align: right; margin-top: 24px"
        >
        </el-pagination>
      </div>
    </div>
    <!-- 添加 -->
    <el-dialog
      title="添加用户"
      :visible.sync="dialogVisible"
      width="40%"
      @close="handleClose"
      :close-on-click-modal="false"
    >
      <el-form
        :model="insertData"
        label-width="90px"
        :rules="rules"
        ref="insertForm"
      >
        <el-form-item label="规格" style="width: 84%" prop="name">
          <el-input
            v-model="insertData.name"
            :clearable="true"
            placeholder="请输入规格"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="价格" style="width: 84%" prop="price">
          <el-input
            v-model="insertData.price"
            placeholder="请输入价格"
            :clearable="true"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="库存量" style="width: 38%" prop="stock">
          <el-input-number
            v-model="insertData.stock"
            :min="0"
            size="small"
            autocomplete="off"
          >
          </el-input-number>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="add" :loading="insertLoading"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!-- 修改 -->
    <el-dialog
      title="修改用户信息"
      :visible.sync="updateDialogVisible"
      width="40%"
      @close="handleCloseUpdate"
      :close-on-click-modal="false"
    >
      <el-form
        :model="updateData"
        label-width="90px"
        :rules="rules"
        ref="updateForm"
      >
        <el-form-item label="规格" style="width: 84%" prop="name">
          <el-input
            v-model="updateData.name"
            :clearable="true"
            placeholder="请输入规格"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="价格" style="width: 84%" prop="price">
          <el-input
            v-model="updateData.price"
            placeholder="请输入价格"
            :clearable="true"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="库存量" style="width: 38%" prop="stock">
          <el-input-number
            v-model="updateData.stock"
            :min="0"
            size="small"
            autocomplete="off"
          >
          </el-input-number>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button @click="updateDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="update" :loading="updateLoading"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  addHotelSpecs,
  deleteHotelSpecsByIds,
  getHotelSpecsList,
  updateHotelSpecs,
} from "@/api/admin/hotel";
import { MessageBox } from "element-ui";
export default {
  name: "HotelSpecsManage",
  data() {
    return {
      page: 1,
      pageSize: 10,
      total: 0,
      currentPage: 1,
      dataList: [],
      insertData: {
        name: "",
        price: "",
        stock: 0,
      },
      rules: {
        name: [{ required: true, message: "请输入规格", trigger: "blur" }],
        price: [{ required: true, message: "请输入价格", trigger: "blur" }],
        stock: [
          { required: true, message: "请输入库存量", trigger: "blur" },
          { pattern: /^[0-9]+$/, message: "请输入数字", trigger: "blur" },
        ],
      },
      updateData: {},
      dialogVisible: false,
      updateDialogVisible: false,
      tableLoading: false,
      insertLoading: false,
      updateLoading: false,
      multipleSelection: [],
    };
  },
  props: ["id"],
  created() {
    this.getHotelSpecsList();
  },
  methods: {
    // 获取规格列表
    async getHotelSpecsList() {
      try {
        this.tableLoading = true;
        const res = await getHotelSpecsList({
          page: this.page,
          pageSize: this.pageSize,
          hotelId: this.id,
        });
        this.dataList = res.data.records;
        this.total = res.data.total;
      } catch {
        this.$message.error("获取规格失败");
      } finally {
        this.tableLoading = false;
      }
    },
    // 新增
    add() {
      this.$refs.insertForm.validate(async (v) => {
        if (v) {
          try {
            this.insertLoading = true;
            this.insertData.hotelId = this.id;
            const res = await addHotelSpecs(this.insertData);
            this.dialogVisible = false;
            this.getHotelSpecsList();
          } catch {
            this.$message.error("添加失败");
          } finally {
            this.insertLoading = false;
          }
        }
      });
    },
    // 删除
    async del(row) {
      MessageBox.confirm("确定删除所选数据吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(async () => {
        const res = await deleteHotelSpecsByIds([row.id]);
        await this.getHotelSpecsList();
      });
    },
    // 批量删除
    async batchDelete() {
      const ids = [];
      this.multipleSelection.forEach((item) => {
        ids.push(item.id);
      });
      MessageBox.confirm("确定删除所选数据吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(async () => {
        const res = await deleteHotelSpecsByIds(ids);
        await this.getHotelSpecsList();
      });
    },
    // 编辑信息
    edit(row) {
      this.updateDialogVisible = true;
      this.updateData = { ...row };
    },
    // 修改信息
    async update() {
      this.$refs.updateForm.validate(async (v) => {
        if (v) {
          try {
            this.updateLoading = true;
            this.updateData.hotelId = this.id;
            const res = await updateHotelSpecs(this.updateData);
            this.updateDialogVisible = false;
            this.getHotelSpecsList();
          } finally {
            this.updateLoading = false;
          }
        }
      });
    },
    // 当选项发生变化触发
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 分页
    handleCurrentChange(page) {
      this.page = page;
      this.currentPage = page;
      this.getHotelSpecsList();
    },
    // 关闭弹窗
    handleClose() {
      this.insertLoading = false;
      this.$refs.insertForm.resetFields();
    },
    // 关闭修改弹窗
    handleCloseUpdate() {
      this.updateLoading = false;
      this.$refs.updateForm.resetFields();
    },
  },
};
</script>

<style lang="less" scoped>
.hotel-specs {
  width: 100%;
  height: 100%;
  margin-bottom: 16px;
  .form {
    padding-left: 20px;
    height: 40px;
    i {
      margin-right: 4px;
    }
  }
  .content {
    width: 100%;
    margin-top: 14px;
    padding-bottom: 16px;
    .operate {
      text-align: left;
      padding: 8px 10px;
    }
  }
}
</style>